<template>
  <div class="btnList" v-loading="loading">
    <div class="line"></div>
    <div class="border"></div>
    <el-tabs v-model="value" type="border-card" @tab-click="handleClick">
      <el-tab-pane v-for="item, index in btnList" :key="index" :label="item.label" :name="item.value">
        <slot />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: 'EnergyTypeTap',
  props: {
    setBtnIndex: {
      type: Number,
      default: () => {
        return 0
      }
    }
  },
  data() {
    return {
      loading: false,
      btnList: [
        {
          label: '水',
          value: '1'
        },
        {
          label: '电',
          value: '2'
        },
        {
          label: '煤',
          value: '3'
        }
      ],
      value: ''
    };
  },
  mounted() {
    this.value = this.btnList[0].value
  },
  methods: {
    handleClick() {
      let facility = this.btnList.find(e => e.value == this.value);
      this.$emit('handleClickTabs', facility);
    }
  }
};
</script>

<style lang="scss" scoped>
.btnList {
  width: 100%;
  height: 100%;
  position: relative;

  .line {
    position: absolute;
    width: 100%;
    border-top: 1px solid #CCD4F5;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
  }

  .border {
    width: 100%;
    height: calc(100% - 22px);
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid #CCD4F5;
    position: absolute;
  }

  ::v-deep .el-tabs {
    width: 100%;
    height: 100%;
  }

  ::v-deep .el-tabs .el-tabs__content {
    width: 100%;
    height: calc(100% - 40px);

    .el-tab-pane {
      width: 100%;
      height: 100%;
    }
  }

  ::v-deep .el-tabs--border-card>.el-tabs__header {
    margin: 0 15px;
  }

  ::v-deep .el-tabs--border-card {
    box-shadow: none;
    background-color: transparent;
  }

  ::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item:first-child {
    margin-left: 0;
  }

  ::v-deep .el-tabs--border-card>.el-tabs__header {
    border: none;
    background-color: transparent;
  }

  ::v-deep .el-tabs--border-card {
    border: none;
  }

  ::v-deep .el-tabs__item {
    margin: 0 15px;
    padding: 0 30px;
    border-radius: 3px;
    margin-top: 0 !important;
    background: #ffffff;
    border: 1px solid #CCD4F5 !important;
    font-size: 18px !important;

    &:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 22px;
      left: 0;
      border: 1px solid #ccd4f500;
    }
  }

  ::v-deep .is-active {
    border: 1px solid #ccd4f500 !important;
    background: #F8F8F8 !important;
    border-radius: 3px !important;
    color: #6176D0 !important;

    &:hover {
      color: #6176D0 !important;
    }

    &:after {
      content: '';
      position: absolute;
      width: calc(100% + 2px);
      height: 21px;
      left: -1px;
      border: 1px solid #CCD4F5;
      border-radius: 3px 3px 0 0;
      border-bottom: none;
    }

  }

  ::v-deep .el-tabs__nav-prev,
  ::v-deep .el-tabs__nav-next {
    background: #F8F8F8;
    border: 1px solid #CCD4F5;
    height: 40px;
  }
}
</style>